﻿<div id="container" class="PageContainer">
    <hr />
    <img id="waitImage" src="images/wait.gif" ng-show="loading" class="waitImage waitImageTopGridPosition" />
    <div style="display:table; margin:0 auto"> <!-- Center this whole div -->
        <div class="customLabelLeftSkinny">Application</div>
        <div class="customLabelRight">{{selectedApp.Name}} {{selectedApp.Version}}</div>
        <button class="btn btn-default" ng-click="pickApp();" style="display:inline-block;" ng-disabled="loading">...</button>
        <br />
        <div class="customLabelLeftSkinny">Server</div>
        <div class="customLabelRight">{{selectedServer.Name}}</div>
        <button class="btn btn-default" ng-click="pickServer();" style="display:inline-block;" ng-disabled="loading">...</button>
        <br />
        <div class="customLabelLeftSkinny">Overrides</div>
        <div class="customLabelRight">{{selectedOverridesNames}}</div>
        <button class="btn btn-default" ng-click="pickOverrides();" style="display:inline-block;" ng-disabled="loading">...</button>
    </div>
    <hr />
    <div class="gridFull" ui-grid="gridResolve" ui-grid-selection ui-grid-resize-columns ui-grid-draggable-rows></div>
    <div ng-repeat="variable in selectedVariables" class="slide">
        <pre>{{variable.Key}}<br />{{variable.Value}}</pre>
    </div>
    <div style="margin-top: 12px; text-align: center;">
        <button class="btn btn-default" ng-click="resolve(true);" ng-disabled="loading">Resolve</button>
    </div>
</div>